import { Component } from "react";
import { Layout, Message } from '@arco-design/web-react';
import { RoleInfo, RoleList } from './modal/index'
import { fetchRoleList, fetchTreeList, fetchModuleListInRole, fetchButtonList, fetchUserList } from '../../../../api/common'
import '../../../../styles/roleManage/index.css'
const Sider = Layout.Sider;
const Content = Layout.Content;
class RoleManage extends Component{
    constructor(props){
        super(props)
        this.state = {
            roleList: {
                loading: true,
                data: [],
                keyword: '',
            },
            currRoleId: '',
            roleTree: {
                loading: true,
                data: []
            },
            module: {
                loading: true,
                data: [],
                buttonList: {}
            },
            list: {
                loading: true,
                keyword: '',
                data: [],

            }
        }
        this.setState.bind(this)
    }

    componentWillMount(){
        // 获取角色列表
        fetchRoleList({keyword: this.state.roleList.keyword}, 
            (res)=>{
                this.setState(state=>{
                    return{
                        ...state,
                        roleList: {
                            ...state.roleList,
                            loading: false,
                            data: res.data.list
                        },
                        currRoleId: res.data.list[0].id || null
                    }
                })
            },
            (error)=>{
                Message.error(error)
        })
        // 加载角色树
        fetchTreeList({currRoleId: this.state.currRoleId},
            (res)=>{
                this.setState(state=>{
                    return{
                        ...state,
                        roleTree: {
                            ...state.roleTree,
                            data: res.data.list,
                            loading: false
                        }
                    }
                })
            },
            (error)=>{
                Message.error(error)
        })
        // 模块选择
        fetchModuleListInRole({currRoleId: this.state.currRoleId},
            (res)=>{
                this.setState(state=>{
                    return{
                        ...state,
                        module: {
                            ...state.module,
                            data: res.data.list,
                            loading: false
                        }
                    }
                })
            },
            (error)=>{
                Message.error(error)
        })
        fetchButtonList({},
            (res)=>{
                this.setState(state=>{
                    return{
                        ...state,
                        module: {
                            ...state.module,
                            buttonList: {
                                ...state.module.buttonList,
                                data: res.data.list
                            }
                        }
                    }
                }
                )
            },
            (error=>{
                Message.error(error)
        }))
        // 获取用户
        fetchUserList({keyword: this.state.list.keyword},
            (res)=>{
                this.setState(state=>{
                    return{
                        ...state,
                        list: {
                            ...state.list,
                            data: res.data.list,
                            loading: false
                        }
                    }
                })
            },
            (error)=>{
                Message.error(error)
        })
        
    }

    render(){
        return(
            <div className='layout-basic-role' style={{ height: '100%' }}>
                <Layout style={{ height: '100%' }}>
                    <Layout>
                        <Sider style={{width: '250px'}}>
                            <RoleList state={this.state} setState={this.setState.bind(this)}/>
                        </Sider>
                        <Content>
                            <RoleInfo state={this.state} setState={this.setState.bind(this)}/>
                        </Content>
                    </Layout>
                </Layout>
            </div>
        )
    }
}

export default RoleManage